<script setup lang="ts">
import Pop from './components/common/Pop.vue';
import Wait from './components/common/Wait.vue';
import { useUniqueComponentsStore } from './app/globalStores/uniqueComponents';
import { storeToRefs } from 'pinia';
import TopbarParent from './components/common/topbar/TopbarParent.vue';
import AppUpdateWarning from './components/common/prompt/AppUpdateWarning.vue';

const { pop, wait, topbarShow } = storeToRefs(useUniqueComponentsStore())
</script>

<template>
<TopbarParent v-if="topbarShow"></TopbarParent>
<div class="mainOuter" :class="{topbarHidden:!topbarShow}">
    <div class="main">
        <RouterView></RouterView>
    </div>
</div>
<Pop ref="pop"></Pop>
<Wait ref="wait"></Wait>
<AppUpdateWarning></AppUpdateWarning>
</template>

<style scoped lang="scss">
@use '@/styles/globalValues';

.mainOuter{
    width: 100vw;
    position: absolute; //只能absolute不能fixed
    top: globalValues.$topbar-height;
    height: globalValues.$body-height;
    transition: 0s;
    overflow: auto;
    box-sizing: border-box;
    &.topbarHidden{
        top: 0px;
        height: 100vh;
    }
}

.main{
    width: calc(100vw - 2 * globalValues.$mainDivLRMargin);
    margin: auto;
    margin-top: 0px;
    box-sizing: border-box;
    max-width: 1400px;
    transition: 0s;
}
</style>